<template>
  <div>
    <!-- <button @click="setTitle">改变父组件的title</button>-----{{title}} -->
    <!-- <Home /> -->
    <!-- <Home2 /> -->

    <h1>我是根组件--{{title}}</h1>
    <br>
    <button @click="setTitle">改变title</button>
    <br><br><br>
    <input type="text" v-model="username">
    <br><br><br>
    {{username}}
 <Home2 />
  </div>
</template>
<script>
// import Home from './Home.vue'
import Home2 from './Home2.vue'
import {ref, provide,reactive, toRefs} from 'vue'
// export default{
//   data(){
//     return {
//       title:'app组件里面的标题'
//     }
//   },
//   components: {
//     //  Home,
//      Home2
//      },
//      methods:{
//        setTitle(){
//          this.title = "改变后的app组件里面的标题"
//        }
//      },
//   // provide:{
//   //   title:"app组件里面的标题"
//   // },
//   provide(){
//     return {
//       title:this.title,
//       userinfo:{
//         username:'zhangsan',
//         age:20
//       }
//     }
//   }
// }
export default{
  name:'app',
    components: {
     Home2
     },
  setup(){
    let title = ref('app根组件里面的title');
    let userinfo = reactive({
      username:'zhangsan',
      age:20
    })
    let setTitle = () => {
      title.value = "app根组件里面改变后的title"
    }
    provide("title",title)
    provide("userinfo",userinfo)
    return {
      title,
      ...toRefs(userinfo),
      setTitle
    }
  }
}
</script>
